<template>
  <div class="qMenu">
    <div class="menu-block" :class="{ menuWidthIn: !openList, menuWidthOut: openList&&menuIn }">
      <div style="height: 68px; text-aligh:center;">
        <div v-if="openList">
          <img style="margin-left: 18px; margin-top:11px; height: 46px;" src="../assets/logo-long.png"/>
        </div>
        <div v-else>
          <img style="margin-left: 12px; margin-top:11px; height: 46px;" src="../assets/logo.png"/>
        </div>
      </div>
      <transition name="slide-fade" mode="out-in">
        <Menu v-if="openList" :theme="theme" :active-name="name" :open-names="openName" @on-open-change="changeOpen" width="160px" :accordion="true" @on-select="changeMenu" key="list">
        
          <Submenu name="task">
            <template slot="title">
              <img class="icon-open" src="../assets/task.png"/>
              任务管理
            </template>
            <MenuItem name="TaskListPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                任务列表
              </div>
            </MenuItem>
          </Submenu>
          
          <Submenu name="user">
            <template slot="title">
              <img class="icon-open" src="../assets/user.png"/>
              用户管理
            </template>
            <MenuItem name="UserListPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                用户列表
              </div>
            </MenuItem>
          </Submenu>
          
          <Submenu name="money">
            <template slot="title">
              <img class="icon-open" src="../assets/money.png"/>
              财务管理
            </template>
            <MenuItem name="MoneyAddPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                充值记录
              </div>
             </MenuItem>
            <MenuItem name="MoneyDelPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                退款记录
              </div>
             </MenuItem>
            <MenuItem name="MoneyCountPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                收益统计
              </div>
            </MenuItem>
                        <MenuItem name="UnpayPage">
              <div class="item-left">
                <img class="icon-open" src="../assets/order.png" />
                待充值记录
              </div>
            </MenuItem>
          </Submenu>
          
        </Menu>
        <!--            缩华版菜单      缩华版菜单     缩华版菜单     缩华版菜单   缩华版菜单         -->
        <Menu v-else :theme="theme" width="80px" :active-name="name" :open-names="openName" @on-open-change="changeOpen" :accordion="true" @on-select="changeMenu" key="icon">
        
          <Submenu name="task">
            <template slot="title">
              <Tooltip content="任务管理" placement="right">
                <img class="icon-open" src="../assets/task.png"/>
              </Tooltip>
            </template>
            <MenuItem name="TaskListPage">
              <Tooltip content="创建订单" placement="right">
                <img class="icon-open" src="../assets/order.png" />
              </Tooltip>
            </MenuItem>
          </Submenu>
  
  
          <Submenu name="user">
            <template slot="title">
              <Tooltip content="用户管理" placement="right">
                <img class="icon-open" src="../assets/user.png"/>
              </Tooltip>
            </template>
            <MenuItem name="UserListPage">
              <div class="item-left">
                <Tooltip content="用户列表" placement="right">
                  <img class="icon-open" src="../assets/user.png"/>
                </Tooltip>
              </div>
            </MenuItem>
          </Submenu>
  
          <Submenu name="money">
            <template slot="title">
              <Tooltip content="财务管理" placement="right">
                <img class="icon-open" src="../assets/money.png"/>
              </Tooltip>
            </template>
            <MenuItem name="MoneyAddPage">
              <div class="item-left">
                <Tooltip content="充值记录" placement="right">
                  <img class="icon-open" src="../assets/order.png" />
                </Tooltip>
              </div>
            </MenuItem>
            <MenuItem name="MoneyDelPage">
              <div class="item-left">
                <Tooltip content="退款记录" placement="right">
                  <img class="icon-open" src="../assets/order.png" />
                </Tooltip>
              </div>
            </MenuItem>
            <MenuItem name="MoneyCountPage">
              <div class="item-left">
                <Tooltip content="收益统计" placement="right">
                  <img class="icon-open" src="../assets/order.png" />
                </Tooltip>
              </div>
            </MenuItem>
          </Submenu>
          
        </Menu>
      </transition>
    </div>
    <div class="content-block" :class="{ contentWidthIn: !openList, contentWidthOut: openList&&menuIn }">
      <div class="header">
        <Row>
          <Col span="24">
          <div class="header-user">
            <Poptip  placement="bottom" trigger="hover" >
              <div style="width: 40px;height: 40px;background-color: #DBDBDB;border-radius: 50%;line-height: 40px;text-align: center;cursor: pointer">
                <img  style="width: 30px;height: 30px; ;vertical-align: middle;" src="../assets/tou.png"/>
              </div>
              <div slot="content" class="info">
                <p style="margin-bottom: 15px;">
                  <span style="color: #8C8C8C">帐号：</span>
                  {{$auth.user().phone_number}}
                </p>
                <Button type="warning" @click="openDialog('showPwdModal')">修改密码</Button>
              </div>
            </Poptip>
            <span style="color: #95989A" v-if="!avatarActive">{{$auth.user().phone_number}}</span>
          
            <span style="padding: 0 16px;">|</span>
            <a style="color: #95989A"  @click="logout">
              退出
            </a>
            <div id="zzz" class="dn">dis</div>
          </div>
          <div>
            <!-- <img style="width: 24px; height: 24px;vertical-align: middle;cursor: pointer" :src="!openList? menuIcon : menuActiveIcon" @click="changeList" /> -->
          </div>
          </Col>
        </Row>
      </div>
      <div class="container">
        <router-view></router-view>
      </div>
    </div>
   
  
    <qmodal
      type="success"
      :show="showSuccess"
      @on-close="closeDialog('showSuccess')"
    >
      <div slot="tip" style="margin-top: 20px;text-align: center; color: #333;font-size: 16px;">
        我知道了
      </div>
    </qmodal>
  
    <qmodal
      type="fail"
      :show="showFail"
      @on-close="closeDialog('showFail')"
    >
      <div slot="tip" style="margin-top: 20px;text-align: center; color: #333;font-size: 16px;">
        我知道了
      </div>
    </qmodal>
    
    <qmodal
      :type="$store.state.app.globalModalConfig.type"
      :show="$store.state.app.globalModalConfig.show"
      @on-close="closeGlobalModal()"
    >
      <div v-html="$store.state.app.globalModalConfig.content" slot="tip" style="margin-top: 20px;text-align: center; color: #333;font-size: 16px;">
      </div>
    </qmodal>
    <!-- 修改密码 -->
    <revise-modal
      :show="showPwdModal"
      @on-close="closeDialog('showPwdModal')"
      @on-success="openDialog('showSuccess')"
      @on-error="openDialog('showFail')"
    ></revise-modal>
    <!-- 修改密码 -->
  </div>
</template>

<script>
import reviseModal from "../components/qPwdRevise.vue";
import qmodal from "../components/qModal.vue";
export default {
  name: "qMenu",
  data() {
    return {
      name: sessionStorage.getItem("name") || "MessagePage",
      openName: [sessionStorage.getItem("openName")] || [],
      link: "http://jbb.91jingyun.com/Reg.aspx?rec",
      theme: "dark",
      openList: true,
      menuIn: false,
      menuIcon: require("../assets/menu.png"),
      menuActiveIcon: require("../assets/menu-active.png"),
      showShare: false,
      showPwdModal: false,
      showSuccess: false,
      showFail: false,
      avatarActive: false
    };
  },
  filters: {},
  components: {
    qmodal,
    reviseModal
  },
  methods: {
    closeDialog(name) {
      this[name] = false;
    },
    openDialog(name) {
      this[name] = true;
    },
    changeMenu(name) {
      this.$router.push({ name });
      sessionStorage.setItem("name", name);
    },
    changeOpen(name) {
      sessionStorage.setItem("openName", name);
    },
    copyFinsh() {
      this.$Message.success("复制成功");
    },
    avatarHover() {
      this.avatarActive = !this.avatarActive;
    },
    changeList(e) {
      this.openList = !this.openList;
      this.menuIn = true;

      if (!this.openList) {
        document.body.classList.add("center");
      } else {
        document.body.classList.remove("center");
      }
    },
    closeGlobalModal() {
      this.$store.commit("closeGlobalModal");
    },
    logout() {
      let vm = this;
      this.$auth.logout({
        makeRequest: true,
        params: {}, // data: {} in axios
        success: function() {
          vm.$router.go(0);
        },
        error: function() {
          vm.$router.go(0);
        }
        // etc...
      });
    }
  },
  mounted: function() {}
};
</script>

<style lang="less">
.dn {
  display: none !important;
}
.center {
  div.ivu-menu-submenu-title,
  .ivu-menu-item {
    text-align: center !important;
  }
}
.ivu-tooltip-popper {
  left: 80px !important;
}
.ivu-menu-dark,
.ivu-menu-submenu,
.ivu-menu-item,
.ivu-menu-submenu-title,
.ivu-menu-item,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
  background: #2f323b;
}
.ivu-menu-dark:hover.ivu-menu-vertical:hover .ivu-menu-item:hover,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover,
.ivu-menu-submenu.ivu-menu-item-active > .ivu-menu-submenu-title,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
  background: #000 !important;
}
.ivu-menu-vertical .ivu-menu-item,
.ivu-menu-vertical .ivu-menu-submenu-title {
  padding: 15px 10px !important;
}
.menuWidthIn {
  animation: menu-in 2s ease;
  width: 80px;
}
.menuWidthOut {
  animation: menu-out 2s ease;
  width: 160px;
}
.contentWidthIn {
  animation: content-in 2s ease;
  width: calc(~"100% - 80px") !important;
  margin-left: 80px !important;
}
.contentWidthOut {
  animation: content-out 2s ease;
  width: calc(~"100% - 160px") !important;
  margin-left: 160px !important;
}
@keyframes menu-in {
  from {
    width: 160px;
  }
  to {
    width: 80px;
  }
}
@keyframes menu-out {
  from {
    width: 80px;
  }
  to {
    width: 160px;
  }
}
@keyframes content-in {
  from {
    width: calc(~"100% - 160px");
    margin-left: 160px;
  }
  to {
    width: calc(~"100% - 80px");
    margin-left: 80px;
  }
}

@keyframes content-out {
  from {
    width: calc(~"100% - 80px");
    margin-left: 80px;
  }
  to {
    width: calc(~"100% - 160px");
    margin-left: 160px;
  }
}

.default-content-background {
  background: #fdfdfd;
  height: 100%;
  min-height: 639px;
  position: relative;
}
.slide-fade-enter-active {
  transition: all 3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}
.demo-badge-alone {
  height: 14px;
  line-height: 14px;
  position: relative;
  right: -10px;
  top: -1px;
}
.qMenu {
  height: 100%;
  .menu-block {
    height: 100%;
    position: fixed;
    background: #2f323b;
    z-index: 50;
    .icon-open {
      height: 20px;
      width: 20px;
      vertical-align: middle;
    }
    .icon-closed {
      height: 32px;
      width: 32px;
    }
    .item-left {
      padding-left: 15px;
    }
    .tool-tip {
      width: 80px;
      height: 51px;
      position: absolute;
      left: -40px;
    }
  }
  .content-block {
    width: calc(~"100% - 160px");
    margin-left: 160px;
    height: 100%;
    .header {
      height: 68px;
      line-height: 68px;
      padding: 0 20px;
      background: #fcfcfc;
      vertical-align: middle;
      &-user {
        float: right;
      }
      &-button {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        text-align: center;
        width: 60px;
        border-radius: 4px;
        margin-right: 20px;
        margin-left: 10px;
        background: #f5933e;
        color: #fff;
        cursor: pointer;
      }
      .info {
        text-align: center;
        font-size: 14px;
        img {
          width: 80px;
          height: 80px;
          margin: 20px 0;
        }
      }
    }
    .container {
      background: #f0f0f0;
      padding: 20px;
      height: calc(~"100% - 68px");
      min-height: 669px;
    }
  }
}
</style>
